#@layout()
#define main()
<div style="flex:1;display: flex;flex-direction: row" class="timeline">
    <div style="width:10px"></div>
    <div style="display:flex;flex-direction: column;width: 250px;">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>时间线节点</legend>
        </fieldset>
        <div style="flex: 1;border:1px solid #ddd">
            <div style="height: 30px;display: flex;align-items: center;margin-left: 5px">
                <!--                            <button class="layui-btn layui-btn-xs " type="button" onclick="add()">新增</button>-->
                <button class="layui-btn layui-btn-xs layui-btn-normal" type="button" onclick="up()">上移</button>
                <button class="layui-btn layui-btn-xs layui-btn-normal" type="button" onclick="down()">下移</button>
                <button class="layui-btn layui-btn-xs " type="button" onclick="refresh()">刷新</button>
                <!--                            <button class="layui-btn layui-btn-xs layui-btn-danger" type="button" onclick="del()">删除</button>-->
            </div>
            <div id="tree" class="demo-tree demo-tree-box"
                 style="flex:1;overflow: auto;border-top: 1px solid #ddd"></div>
        </div>
        <div style="height: 10px"></div>
    </div>
    <div style="width:20px"></div>
    <div style="flex:1;display:flex;flex-direction: column;">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>节点详情</legend>
        </fieldset>
        <div style="flex:1;border:1px solid #ddd">
            <form class="layui-form" style="margin: 5px; " action="" lay-filter="timelinePoint">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="createTime" placeholder="" autocomplete="off"
                                   class="layui-input" value='' disabled>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">更新时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="lastUpdateTime" placeholder=""
                                   autocomplete="off" class="layui-input" value='' disabled>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">朝代名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="dynastyName" placeholder="" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">朝代别称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="dynastyNickName" placeholder="" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">开创者</label>
                        <div class="layui-input-inline">
                            <input type="text" name="founder" placeholder="" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">都城</label>
                        <div class="layui-input-inline">
                            <input type="text" name="capital" placeholder="" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="startYear" placeholder="年"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="endYear" placeholder="年"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="display: flex">
                        <!--                <div style="display: inline-block;flex: 1"></div>-->
                        <!--                        <div style="display: inline-block;flex: 1"></div>-->
                        <!--                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                        <button class="layui-btn" type="button" onclick="save()">保存</button>
                        <!--                        <div style="display: inline-block;flex: 1"></div>-->
                    </div>
                </div>
            </form>

            <fieldset class="layui-elem-field layui-field-title">
                <legend>年号列表</legend>
            </fieldset>


            <div style="width: 1000px;height:200px;margin:10px">
                <div class="layui-btn-group" style="margin-bottom: -10px">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="addColumn()">新增</button>
                    <button class="layui-btn layui-btn-sm" onclick="saveTable()">保存</button>
                </div>
                <table class="layui-table" lay-filter="table" id="table">
                </table>
            </div>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
        <div style="height: 10px"></div>
    </div>
    <div style="width:10px"></div>
</div>
<script>
    let tree = layui.tree;
    //选中节点数据
    let checkData = {};

    //定义树数据源
    let treeData = [];
    //上一选中节点
    let currentSelectElem = {};
    //当前选中节点
    let lastSelectElem = {};


    function save() {
        let param = layui.form.val("timelinePoint");
        // let checkData = layui.tree.getChecked('tree');
        if (checkData.id) {
            param.id = checkData.id;
            $.post("/dataManagement/timeline/update", param, function (data) {
                if (data.code == 0) {
                    $(currentSelectElem).find(".layui-tree-txt").first().text(param.dynastyName);
                    layer.msg(data.msg, {time: 2000});
                } else {
                    layer.msg(data.msg, {time: 2000});
                }
            });
        } else {
            layer.msg("请先选中节点", {time: 2000});
        }
    }

    //节点上移
    function up() {
        layer.msg("暂未实现", {time: 2000});
    }

    //节点下移
    function down() {
        layer.msg("暂未实现", {time: 2000});
    }

    //树数据刷新
    function refresh() {
        //重新加载树数据
        loadtree();
        //重置表单数据
        layui.form.val("timelinePoint", {});

        layer.msg("数据已刷新", {time: 2000});
    }

    //加载树数据
    function loadtree() {
        $.post("/dataManagement/timeline/tree", {}, function (data) {
            if (data.code == 0) {
                treeData = data.data
                tree.render({
                    id: 'tree',
                    elem: '#tree',
                    onlyIconControl: true,
                    data: treeData,
                    edit: ['add', 'del'], //操作节点的图标
                    click: function (obj) {
                        checkData = obj.data;
                        $.post("/dataManagement/timeline/id", {id: obj.data.id}, function (data) {
                            if (data.code == 0) {
                                //给表单赋值
                                layui.form.val("timelinePoint", data.data);
                            } else {
                                layer.msg(data.msg, {time: 2000});
                            }
                        });

                        //选中节点效果
                        // #eee  background-
                        lastSelectElem = currentSelectElem;
                        currentSelectElem = obj.elem;
                        $(lastSelectElem).find(".layui-tree-entry").first().css("background-color", "");
                        $(currentSelectElem).find(".layui-tree-entry").first().css("background-color", "#eee");

                    },
                    operate: function (obj) {
                        let type = obj.type; //得到操作类型：add、edit、del
                        let data = obj.data; //得到当前节点的数据
                        let elem = obj.elem; //得到当前节点元素

                        //Ajax 操作
                        let id = data.id; //得到节点索引
                        if (type === 'add') { //增加节点
                            let key = '';
                            $.ajaxSettings.async = false;
                            $.post("/dataManagement/timeline/add", {dynastyName: '未命名', parentId: id}, function (data) {
                                if (data.code == 0) {
                                    key = data.data.id;
                                    return key;
                                    layer.msg(data.msg, {time: 2000});
                                } else {
                                    layer.msg(data.msg, {time: 2000});
                                }
                            });
                            $.ajaxSettings.async = true;
                            //返回 key 值
                            return key;
                        } else if (type === 'del') { //删除节点
                            $.post("/dataManagement/timeline/delete", {id: id}, function (data) {
                                if (data.code == 0) {
                                    layer.msg(data.msg, {time: 2000});
                                } else {
                                    layer.msg(data.msg, {time: 2000});
                                }
                            });
                        }
                    }
                })
                //禁止删除根节点
                $(".layui-icon-delete:first").remove()
            } else {
                layer.msg(data.msg, {time: 2000});
            }
        });

    }

    //初始化树数据
    loadtree();


    layui.table.render({
        elem: '#table'
        // , height: '500'
        , url: '/dataManagement/eraName/paginate' //数据接口
        , page: false //开启分页
        , cols: [[ //表头
            {field: 'index', title: '序号', width: 80, sort: true, fixed: 'left', align: 'center'}
            , {field: 'name', title: '年号', width: 80, align: 'center'}
            , {field: 'sex', title: '开始年份', width: 120, sort: true, align: 'center'}
            , {field: 'age', title: '开始月份', width: 120, sort: true, align: 'center'}
            , {field: 'birth_date', title: '结束年份', width: 120, sort: true, align: 'center'}
            , {field: 'death_date', title: '结束月份', width: 120, sort: true, align: 'center'}
            , {field: 'last_update_time', title: '使用时间（年）', width: 150, sort: true, align: 'center'}
            , {field: 'create_time', title: '备注', sort: true, align: 'center'}
            , {title: '操作', toolbar: '#barpoetTable', width: 100, align: 'center'}
        ]]
    });


    //新增年号
    function addColumn() {
        layer.msg("暂未实现", {time: 2000});
    }


</script>
<style>
    .timeline .layui-field-title {
        margin-bottom: 10px;
    }
</style>
#end